<template>
  <div id="mine">
        <div class="top">
            <div class="picture-mine">
                <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <!-- <img src="../assets/img/toux.jpg" alt=""> -->
            <div class="person-info f_fr">
                <p class="name">张三</p>
                <p class="descprtion">负责品类：电动、园林</p>
            </div>
            <div class="data-info">
                <p>
                    <span class="border-right" @click="selectData(index)" v-for="(item,index) in dataInfo"  
                    :key='index' v-bind:class="[{'cur':item.state},{'border-right':(item.index=='0'||item.index=='1')}]" >{{item.data}}</span>
                    <!-- <span class="border-right" @click="selectData">本周</span>
                    <span @click="selectData">本月</span> -->
                </p>
                <div class="block">
                    <el-date-picker
                    v-model="valueData"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
            </div>
            <ul>
                <li v-for="(item,index) in taskInfo" :key='index'>
                    <p>{{item.name}}</p>
                    <p>{{item.num}}</p>
                </li>
            </ul>
        </div>
        <div class="bottom">
            <p class="despection">服务总量变化趋势</p>
            <div id="myChart" style="width:100%;height:300px"></div>
        </div>
  </div>
</template>

<script>
export default {
    name: 'mine',
    data() {
        return {
           valueData:'',
           pickerOptions:'',
           dataInfo:[
               {data:'今日',state:false},
               {data:'本周',state:true},
               {data:'本月',state:false}
           ],
           taskInfo:[
               {name:'未开始',num:6},
               {name:'已完成',num:3},
               {name:'挂起',num:1}
           ],
           echartInfo:{
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [2, 5, 8, 16, 4, 10, 8],
                    type: 'line'
                }]
            },
            imageUrl: '',
        }
    },
    mounted: function(){
        this.drawLine();
        localStorage.setItem("pageId",3);
    },
    methods: {
        selectData:function(index){
            let arr = this.dataInfo;
            arr.forEach(item => {
                item.state = false;
            });
            this.$set(this.dataInfo[index],'state', true)
        },
        drawLine:function(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption(this.echartInfo);
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
}
</script>

<style>
#mine{
    color: #646464;
    font-size: 0.33rem;
    height: 100%;
}
/* 图片 */
#mine .avatar-uploader .el-upload {
    border: 1px dashed #E6E6E6;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-top: 0.1rem;
    width: 1.6rem;
    height: 1.6rem;
  }

  #mine .avatar-uploader-icon {
    font-size: 0.5rem;
    width: 0.8rem;
    height: 0.8rem;
    text-align: center;
    margin-top: 0.55rem;
  }
  #mine .picture-mine{
      float: left;
      display: block;
      width: 1.6rem;
      margin-left: 0.5rem;
      /* border: #333333; */
  }
  #mine .top img{
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: inline-block;
}

.top{
    background: #ffffff;
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
}

.top .person-info{
    width: 4rem;
    display: inline-block;
    text-align: left;
    line-height: 0.8rem;
}
.top .data-info{
    margin-top: 2rem;
}
.top .data-info>p{
    width: 41%;
    display: inline-block;
    border: 0.01rem solid #dcdfe6;
    margin-bottom: 0.1rem;
    border-radius: 0.08rem;
}
.data-info>p span{
    height: 100%;
    display: inline-block;
    width: 30.5%;
    padding:0.1rem 0.03rem;
    color: #ff5000;
}
.border-right{
    border-right: 0.01rem solid #dcdfe6;
}
.top .data-info>div{    
    width: 56%;
    display: inline-block;
}
.top .data-info>div>div{
    width: 100%;
}
.data-info>p span.cur{
    background: #ff5000;
    color: #ffffff;
}
.top ul{
    margin-top: 0.3rem;
}
.top ul li{
    width: 33%;
    display: inline-block;
}
.top ul li p{
    line-height: 0.6rem;
}
.bottom{
    width: 90%;
    padding: 5%;
    padding-top: 0.6rem;
    /* height: 4rem; */
}
.bottom .despection{
    height: 0.7rem;
    line-height: 0.7rem;
    background: #ffffff;
}
</style>
